<template>
  <div class="home" style="text-align:center;">
    <Top title="水珠钱包" iconShow="0" :newMessage="newMessage">
      <span slot="icon">
        <i class="iconfont icon-laba-bg" @click="goActive()"></i>
      </span>
    </Top>
    <div class="home-content">
      <!-- banner轮播 -->
      <div class="home-content-banner">
        <mt-swipe :auto="5000">
          <mt-swipe-item v-for="(item,index) in bannerList" :key="index">
            <img :src="item.titleImg" @click="goBannerPage(item,index)" />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <!-- banner轮播结束 -->
      <!-- 跑马灯开始 -->
      <div class="home-content-flow">
        <div class="home-content-flow-icon">
          <i class="iconfont icon-laba"></i>
        </div>
        <div class="home-content-flow-detail">
          <div>
            <ul id="rollUl">
              <li v-for="(item,index) in rollList" :key="index" class="align-middle">
                <span class="num">{{item.phone}}</span>在[
                <span class="name"> {{item.product_name}} </span>]成功申请&nbsp;&nbsp;
                <span class="money">{{item.money |  moneyfilter}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 跑马灯结束 -->
      <!-- 明星产品轮播 -->
      <div class="home-content-product">
        <mt-swipe :auto="0">
          <mt-swipe-item v-for="(item,index) in starList" :key="index">
            <div class="home-content-product-logo">
              <div class="home-content-product-logo-imgwrap">
                <img alt="贷款" :src="item.product_img"  @click="goDetail(item.id,index)"/>
              </div>
            </div>
            <div class="home-content-product-detail">
              <div class="home-content-product-detail-title" @click="goDetail(item.id,index)">{{item.product_name}}</div>
              <div class="home-content-product-detail-money">
                <span>¥</span>{{item.quato}}</div>
              <div class="home-content-product-detail-advantage">
                <span>{{item.lend_speed}}放款</span>
                <span>参考日费率:{{item.daily_interest_rate}}%</span>
              </div>
            </div>
            <div class="home-content-product-promt">
              <mt-button type="primary" @click="goDetail(item.id,index)">立即申请</mt-button>
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="home-content-waterpicked">
        一 水珠精选 一
      </div>
      <!-- 明星产品轮播结束 -->
      <!-- 水珠精选模块 -->
      <div class="home-content-watermodal">
        <!-- 信用卡取现开始 -->
        <div class="home-content-watermodal-card" @click="getMoney">
          <img src="../assets/home/xinyongkaquxian.png" alt="">
          <div class="right">
            <div>信用卡取现</div>
            <div>急速取现&nbsp;&nbsp;消费无忧</div>
          </div>
        </div>
        <!-- 信用卡取现结束 -->
        <div class="home-content-watermodal-loan" @click="goOrder(1)">
          <div class="home-content-watermodal-loan-img">
            <img src="../assets/home/jiekuan.png" />
            <p>我要借款</p>
            <span>首次用户借款享好礼</span>
          </div>
          <div class="home-content-watermodal-loan-detail"></div>
        </div>
        <div class="home-content-watermodal-high" @click="goOrder(2)">
          <div class="home-content-watermodal-high-img">
            <img src="../assets/home/edu.png" />
          </div>
          <div class="home-content-watermodal-high-detail">
            <p>额度高</p>
            <span>轻松完成借款</span>
          </div>
        </div>
        <div class="home-content-watermodal-low" @click="goOrder(3)">
          <div class="home-content-watermodal-low-img">
            <img src="../assets/home/lilv.png" />
          </div>
          <div class="home-content-watermodal-low-detail">
            <p>利率低</p>
            <span>借款的神奇</span>
          </div>
        </div>
        <div class="home-content-watermodal-long" @click="goOrder(5)">
          <div class="home-content-watermodal-long-img">
            <img src="../assets/home/zhouqi.png" />
          </div>
          <div class="home-content-watermodal-long-detail">
            <p>周期长</p>
            <span>借款更自由</span>
          </div>
        </div>
        <div class="home-content-watermodal-hot" @click="goOrder(4)">
          <div class="home-content-watermodal-hot-img">
            <img src="../assets/home/remen.png" />
          </div>
          <div class="home-content-watermodal-hot-detail">
            <p>热门</p>
            <span>人气产品推荐</span>
          </div>
        </div>
      </div>
      <div class="home-content-inforpicked">
        一 资讯精选 一
      </div>
      <!-- 资讯精选模块 -->
      <div class="home-content-informodal">
        <div class="home-content-informodal-item" v-for="(item,index) in selectedList" :key="index" @click="goMessageSelected(item.id)">
          <div class="home-content-informodal-item-img">
            <img :src="item.img" />
          </div>
          <div class="home-content-informodal-item-detail">
            {{item.title}}
          </div>
        </div>
      </div>
      <div class="home-content-bottom">
        <div class="home-content-bottom-left" @click="goMessage()">
          <p>资讯</p>
          <span>现金贷行业资讯</span>
        </div>
        <div class="home-content-bottom-right" @click="goCommunity()">
          <p>论坛</p>
          <span>小贷玩家聚集地</span>
        </div>
      </div>
    </div>
    <!-- 出行保险活动弹框 -->
    <div class="activity" v-if="activityShow&&activityTime*1<3">
      <div class="imgBox">
        <img class="img1" src="../assets/home/activity.png">
        <img class="img2" src="../assets/home/close.png" @click="closeActivity">
        <div class="btn" @click="getActivity">免费领取</div>
        <div class="mesg">注册即同意《水珠钱包服务条款及保险公司信息承诺》</div>
      </div>
    </div>
    <!-- 领取成功弹框 -->
    <div class="activity1" v-if="activity1">
      <div class="imgBox">
        <img class="img1" src="../assets/home/jinbi.png">
        <img class="img2" src="../assets/home/close.png" @click="closeActivity1">
        <div class="mesg">保险公司审核成功后，会以短信通知领取。</div>
      </div>
    </div>
    <Foot aIndex="0" fromIndex="1"></Foot>
  </div>
</template>

<script>
import Vue from "vue";
import "../js/lib/flexble.js";
import commons from "../common/js/common.js";
import { Swipe, SwipeItem, MessageBox, Indicator } from "mint-ui";
import Top from "components/Header/Header";
import Foot from "components/Footer/Footer";

export default {
  name: "home",
  data() {
    return {
      bannerList: [],
      rollList: [],
      starList: [],
      selectedList: [],
      token: "",
      newMessage: 1,
      activityShow: false, //如果是从登陆页面过来的就为true
      activityTime: window.localStorage.getItem("activityTime")
        ? window.localStorage.getItem("activityTime")
        : "0",
      activity1: false
    };
  },
  filters: {
    moneyfilter(val) {
      return commons.moneyfilter(val);
    }
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => {
      //请求拦截器
      //请求前
      request.headers.set("token", commons.getCookie("token")); //设置请求头
      Indicator.open("加载中..."); //请求loading
      next(response => {
        //请求后
        Indicator.close(); //隐藏loading
        return response;
      });
    });
    let vm = this;
    if (commons.getParameter("channel")) {
      window.sessionStorage.setItem("channel", commons.getParameter("channel"));
    }
    var token = commons.getCookie("token");
    if (token) {
      this.token = token;
    }
    let $realName = sessionStorage.getItem("realName"),
      $idcardCode = sessionStorage.getItem("idcardCode");
    if (
      commons.getParameter("activityShow") == "1" &&
      $realName &&
      $idcardCode
    ) {
      this.activityShow = true;
    }

    // 是否更新小红点
    let $newMessage = sessionStorage.getItem("newMessage"),
      $tel = sessionStorage.getItem("tel");
    if ($newMessage && !$tel) {
      vm.newMessage = false;
    } else {
      this.$http
         .get(`/loansupermarket-app/index/getUpdateActivity?token=${this.token}`)
       //    .get(`/yiyaTest/hamer/getUpdateActivity?token=${this.token}`)
        .then(response => {
          var resBody = response.body;
          if (resBody.code == "000") {
            if (resBody.data == 1) {
              vm.newMessage = true;
            } else {
              vm.newMessage = false;
            }
          } else {
            MessageBox.alert(resBody.mesg);
          }
        });
    }

    // 首页浏览量统计
    this.$http
      .get(
        `/loansupermarket-app/platform/homePage?token=${
          this.token
        }&phone=${window.sessionStorage.getItem("phone")}&channel=${
          window.sessionStorage.getItem("channel")
            ? window.sessionStorage.getItem("channel")
            : ""
        }`
      )
      .then(response => {
        var resBody = response.body;
        if (resBody.code == "000") {
        } else {
          MessageBox.alert(resBody.mesg);
        }
      });

    // 调用banner列表接口
    this.$http.get("/loansupermarket-app/index/getBannar").then(response => {
  //   this.$http.get("/yiyaTest/hamer/getBannar").then(response => {
      console.log(response.data);
      var resBody = response.body;
      if (resBody.code == "000") {
        this.bannerList = resBody.data;
      } else {
        MessageBox.alert(resBody.mesg);
      }
    });
    // this.$http.get("/yiyaTest/testing/funs").then(response => {
    //   console.log(response.data);
    // });
    //调用走马灯列表接口
    this.$http
       .get("/loansupermarket-app/index/getBorrowRecord")
     // .get("/yiyaTest/hamer/getBorrowRecord")
      .then(response => {
        var resBody = response.body;
        if (resBody.code == "000") {
          this.rollList = resBody.data;
          //走马灯文字翻滚
          let length = this.rollList.length;
          let index = 0;
          let rollUl = document.getElementById("rollUl");
          function addTransition() {
            rollUl.style.webkitTransition = "all .4s";
            rollUl.style.transition = "all .4s";
          }
          function removeTransition() {
            rollUl.style.webkitTransition = "none";
            rollUl.style.transition = "none";
          }
          setInterval(function() {
            index++;
            addTransition();
            rollUl.style.transform = "translateY(-" + index * 40 + "px";
          }, 2000);

          rollUl.addEventListener("webkitTransitionEnd", function() {
            if (index >= length) {
              index = 0;
              removeTransition();
              rollUl.style.transform = "translateY(-" + index * 40 + "px";
            }
          });
          rollUl.addEventListener("transitionEnd", function() {
            if (index >= length) {
              index = 0;
              removeTransition();
              rollUl.style.transform = "translateY(-" + index * 40 + "px";
            }
          });
        } else {
          MessageBox.alert(resBody.mesg);
        }
      });

    //调用明星产品列表接口
    this.$http
       .get("/loansupermarket-app/index/getStarProduct")
     // .get("/yiyaTest/hamer/getStarProduct")
      .then(response => {
        var resBody = response.body;
        if (resBody.code == "000") {
          this.starList = resBody.data;
          // this.starList.forEach(function(item, index) {
          //   item.daily_interest_rate = (item.daily_interest_rate * 1).toFixed(
          //     2
          //   );
          // });
        } else {
          MessageBox.alert(resBody.mesg);
        }
      });
    // 调用首页资讯精选接口
    this.$http.get("/loansupermarket-app/index/getIndexNews").then(response => {
    // this.$http.get("/yiyaTest/hamer/getIndexNews").then(response => {
      var resBody = response.body;
      if (resBody.code == "000") {
        this.selectedList = resBody.data;
      } else {
        MessageBox.alert(resBody.mesg);
      }
    });
  },
  // 组件包含头部，密码登录，验证码登录
  components: { Top, Foot },
  methods: {
    // 统计banner点击量
    goBannerPage(item, index) {
      let url = item.url,
        bannerId = item.id,
        link = item.linkState;
      this.$http
        .post("/loansupermarket-app/platform/visitCount", {
          token: this.token,
          bannerId: index + 1,
          phone: window.sessionStorage.getItem("phone"),
          channel: window.sessionStorage.getItem("channel")
            ? window.sessionStorage.getItem("channel")
            : ""
        })
        .then(function(response) {
          // 点击banner图片跳转到相应的渠道页面
          //如果地址无id则跳转地址，否则跳内部产品
          //linkState为0时，取productId，获取产品详细页
          let _id = commons.getParameter2(url, "id");
          let _status = commons.getParameter2(url, "status");
          let _index = commons.getParameter2(url, "index");
          if (url.indexOf("id") == -1) {
            //没id，跳转url（外部产品）
            window.location.href = url;
          } else {
            //有id，跳转内部产品
            location.href = `./loan/product.html?id=${_id}&status=${_status}&index=${_index}&fromBanner=1`;
          }
        })
        .catch(() => {
          // 点击banner图片跳转到相应的渠道页面
          //如果地址无id则跳转地址，否则跳内部产品
          //linkState为0时，取productId，获取产品详细页
          let _id = commons.getParameter2(url, "id");
          let _status = commons.getParameter2(url, "status");
          let _index = commons.getParameter2(url, "index");
          if (url.indexOf("id") == -1) {
            //没id，跳转url（外部产品）
            window.location.href = url;
          } else {
            //有id，跳转内部产品
            location.href = `./loan/product.html?id=${_id}&status=${_status}&index=${_index}&fromBanner=1`;
          }
        });
    },
    // 进入明星产品详情页
    goDetail(id, index) {
      // 统计明星产品点击量
      this.$http
        .post("/loansupermarket-app/platform/visitCount", {
          token: this.token,
          starPlatformId: index + 1,
          phone: window.sessionStorage.getItem("phone"),
          channel: window.sessionStorage.getItem("channel")
            ? window.sessionStorage.getItem("channel")
            : ""
        })
        .then(function(response) {
          window.location.href = "./loan/product.html?id=" + id + "&status=2";
        })
        .catch(() => {
          window.location.href = "./loan/product.html?id=" + id + "&status=2";
        });
    },
    //去到信用卡取现界面
    getMoney() {
      let phone = window.sessionStorage.getItem("phone")
        ? window.sessionStorage.getItem("phone")
        : "";
      let channel = window.sessionStorage.getItem("channel")
        ? window.sessionStorage.getItem("channel")
        : "";
      //统计信用卡取现
      this.$http
        .get(
          "/loansupermarket-app/platform/cardPage?token=" +
            commons.getCookie("token") +
            "&phone=" +
            phone +
            "&channel=" +
            channel
        )
        .then(function(response) {
          if (response.body.code == "000") {
            // this.$router.push({ path: "/main/mine/enchash/getMoney" });
            window.location.href = "./enchash/getMoney.html";
          }
        });
    },
    // 进入活动页
    goActive() {
      // this.$router.push({ path: "/activity" });
      window.location.href = "./active/active.html";
    },
    // 进入资讯页
    goMessage() {
      // this.$router.push({ path: "/main/discover/selected" });
      window.location.href = "./news/page.html";
    },
    // 进入社区页面
    goCommunity() {
      window.location.href = "./bbs/page.html";
      // this.$router.push({ path: "/main/discover/discuss" });
    },
    // 我要借款
    goOrder(index) {
      this.$http
        .post("/loansupermarket-app/platform/visitCount", {
          token: this.token,
          buttonId: index,
          phone: window.sessionStorage.getItem("phone"),
          channel: window.sessionStorage.getItem("channel")
            ? window.sessionStorage.getItem("channel")
            : ""
        })
        .then(() => {
          window.location.href = "./loan/index.html?index=" + index;
        })
        .catch(() => {
          window.location.href = "./loan/index.html?index=" + index;
        });
    },
    //进入精选页
    goMessageSelected(id) {
      window.location.href = "./news/article.html?id=" + id;
      // this.$router.push({
      //   path: "/main/mine/mydiscover/messageselected",
      //   query: { id: id }
      // });
    },
    closeActivity() {
      this.activityShow = false;
      this.activityTime = this.activityTime * 1 + 1;
      window.localStorage.setItem("activityTime", this.activityTime);
    },
    getActivity() {
      this.activityShow = false;
      this.activityTime = this.activityTime * 1 + 100;
      window.localStorage.setItem("activityTime", this.activityTime);
      this.$http
        .post("/loansupermarket-app/index/getInsurance", { token: this.token })
        .then(function(response) {
          if (response.body.code == "000") {
            this.activity1 = true;
          } else {
            if (resBody.mesg) {
              MessageBox.alert(resBody.mesg);
            }
          }
        });
    },
    closeActivity1() {
      this.activity1 = false;
    }
  }
};
</script>
<style lang="scss">
@import "../scss/base.scss";
.home {
  &-content {
    &-banner {
      margin-top: 1.2rem;
      width: 100%;
      height: 4.66rem;
      .mint-swipe-item {
        background: #48d8db;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &-flow {
      width: 100%;
      height: 40px;
      display: flex;

      &-icon {
        flex: 1.6;
        .iconfont {
          font-size: 26px;
          line-height: 40px;
          vertical-align: 5%;
          color: #fac752;
        }
      }
      &-detail {
        font-size: 0.35rem !important;
        flex: 10.9;
        text-align: left;
        line-height: 40px;
        font-size: 14px;
        overflow: hidden;
        ul {
          transition: all 1.5s;
        }
        .num {
          text-decoration: underline;
        }
        .money {
          color: #48d8db;
        }
      }
    }
    &-product {
      width: 100%;
      height: 2.8rem;
      background: #fff;
      display: flex;
      .mint-swipe {
        width: 100%;
        height: 100%;
        .mint-swipe-items-wrap {
          width: 100%;
          height: 100%;
          .mint-swipe-item {
            // display: flex;
            width: 100%;
            height: 100%;
          }
        }
        .mint-swipe-indicators {
          .mint-swipe-indicator {
            width: 4px;
            height: 4px;
            background: #e4e4e4;
            opacity: 1;
          }
          .is-active {
            background: #fac752;
          }
          left: 85%;
        }
      }
      &-logo {
        width: 20%;
        float: left;
        &-imgwrap {
          width: 1.2rem;
          height: 1.2rem;
          margin: 0.7rem auto;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &-detail {
        width: 50%;
        float: left;
        text-align: left;
        &-title {
          height: 0.9rem;
          line-height: 1rem;
          font-size: 0.42rem;
          margin-top: 0.1rem;
        }
        &-money {
          color: #ff5249;
          height: 0.5rem;
          font-size: 0.52rem;
          span {
            font-size: 0.4rem;
            margin-right: 0.1rem;
          }
        }
        &-advantage {
          height: 0.8rem;
          color: #959595;
          span:nth-of-type(1) {
            border-right: 1px solid #e4e4e4;
            padding-right: 0.2rem;
          }
          span:nth-of-type(2) {
            padding-left: 0.2rem;
          }
          line-height: 1.12rem;
        }
      }
      &-promt {
        width: 30%;
        float: left;
        .mint-button {
          margin: 0.95rem auto;
          width: 2.3rem;
          height: 0.9rem;
          font-size: 0.35rem !important;
        }
      }
    }
    &-waterpicked,
    &-inforpicked {
      font-size: 0.4rem;
      font-weight: bold;
      text-align: center;
      line-height: 1.3rem;
      width: 100%;
      height: 1.3rem;
      background: #f5f5f5;
    }
    &-watermodal {
      width: 100%;
      height: 6.52rem;
      box-sizing: border-box;
      padding: 0 0.4rem;

      &-card {
        height: 2.666rem;
        background: #fff;
        margin-bottom: 0.26rem;
        img {
          float: left;
          width: 2.8rem;
          margin-left: 0.8rem;
          margin-top: 0.53rem;
        }
        .right {
          float: right;
          text-align: right;
          margin-right: 0.8rem;
          div:first-child {
            font-size: 0.48rem;
            color: #333;
            margin-top: 0.67rem;
          }
          div:last-child {
            font-size: 0.34rem;
            color: #666;
            margin-top: 0.22rem;
          }
        }
      }
      &-loan {
        width: 4.44rem;
        height: 4.25rem;
        float: left;
        border-radius: 0.12rem;
        overflow: hidden;
        background: #fff;
        &-img {
          width: 100%;
          height: 100%;
          img {
            width: 1.8rem;
            height: auto;
            margin-top: 0.83rem;
          }
          p {
            font-size: 0.4rem;
            margin-top: 0.55rem;
            padding: 0;
            margin-bottom: 0.16rem;
          }
          span {
            font-size: 0.3rem;
            color: #959595;
          }
        }
      }
      &-high {
        width: 4.47rem;
        height: 2rem;
        background: #fff;
        float: right;
        border-radius: 0.12rem;
        display: flex;
        &-detail {
          width: 2.14rem;
          text-align: left;
          p {
            margin-top: 0.6rem;
            font-size: 0.4rem;
          }
          span {
            margin-top: 0.36rem;
            font-size: 0.3rem;
            color: #959595;
          }
        }
        &-img {
          width: 2.31rem;
          height: 100%;
          img {
            width: 1rem;
            height: auto;
            margin-top: 0.44rem;
          }
        }
      }
      &-long {
        width: 4.47rem;
        height: 2rem;
        background: #fff;
        float: left;
        margin-top: 0.26rem;
        border-radius: 0.12rem;
        display: flex;
        &-detail {
          width: 2.14rem;
          text-align: left;
          p {
            margin-top: 0.6rem;
            font-size: 0.4rem;
          }
          span {
            margin-top: 0.36rem;
            font-size: 0.3rem;
            color: #959595;
          }
        }
        &-img {
          width: 2.31rem;
          height: 100%;
          img {
            width: 1.35rem;
            height: auto;
            margin-top: 0.25rem;
          }
        }
      }
      &-low,
      &-hot {
        width: 4.47rem;
        height: 2rem;
        background: #fff;
        float: right;
        margin-top: 0.26rem;
        border-radius: 0.12rem;
        display: flex;
        &-detail {
          width: 2.14rem;
          text-align: left;
          p {
            margin-top: 0.6rem;
            font-size: 0.4rem;
          }
          span {
            margin-top: 0.36rem;
            font-size: 0.3rem;
            color: #959595;
          }
        }
        &-img {
          width: 2.31rem;
          height: 100%;
          img {
            width: 1.35rem;
            height: auto;
            margin-left: -0.3rem;
            margin-top: 0.25rem;
          }
        }
      }
      &-hot {
        &-img {
          img {
            width: 1.45rem;
            margin-top: 0.5rem;
            margin-left: 0.05rem;
          }
        }
      }
    }
    &-informodal {
      width: 100%;
      background: #fff;
      background-color: white;
      white-space: nowrap;
      // height: 3.9rem;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      color: #666;
      display: inline-block;
      padding: 0.2rem 0.2rem 0.2rem 0.4rem;
      margin-top: 0.2rem;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0px;
      }
      .home-content-informodal-item {
        margin-right: 0.2rem;
        width: 4rem;
        display: inline-block;
        vertical-align: top;
        &-detail {
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 0.3rem;
        }
        &-img {
          width: 100%;
          height: 3rem;
          background: #fff;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .box1-item:first-child {
        margin-left: 0;
      }
    }
    &-bottom {
      margin-top: 0.26rem;
      width: 100%;
      height: 2.6rem;
      margin-bottom: 1.6rem;
      display: flex;
      box-sizing: border-box;
      padding: 0 0.4rem;
      &-left {
        width: 4.5rem;
        height: 100%;
        background: url("../assets/home/zixun.png");
        background-size: cover;
        border-radius: 0.12rem;
        overflow: hidden;
        text-align: left;
        box-sizing: border-box;
        padding: 0.67rem 0.4rem;
        p {
          font-size: 0.4rem;
        }
        span {
          font-size: 0.3rem;
          color: #959595;
        }
      }
      &-right {
        width: 4.5rem;
        margin-left: 0.2rem;
        height: 100%;
        background: url("../assets/home/shequ.png");
        background-size: cover;
        border-radius: 0.12rem;
        box-sizing: border-box;
        text-align: left;
        overflow: hidden;
        padding: 0.67rem 0.4rem;
        p {
          font-size: 0.4rem;
        }
        span {
          font-size: 0.3rem;
          color: #959595;
        }
      }
    }
  }
}
.align-middle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2000;
  .imgBox {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9rem;
    margin-top: -3.7rem;
    margin-left: -4.5rem;
    .img1 {
      width: 100%;
    }
    .img2 {
      width: 0.74rem;
      margin-top: 0.9rem;
    }
    .btn {
      position: absolute;
      top: 3.4rem;
      left: 50%;
      width: 3.6rem;
      margin-left: -1.8rem;
      height: 1rem;
      line-height: 1rem;
      background: #ffeb01;
      border-radius: 0.5rem;
      font-size: 0.49rem;
      color: #ca1a27;
    }
    .mesg {
      position: absolute;
      top: 5.4rem;
      left: 50%;
      width: 4.8rem;
      margin-left: -2.4rem;
      height: 1rem;
      line-height: 0.45rem;
      font-size: 0.29rem;
      color: #fff;
    }
  }
}
.activity1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2000;
  .imgBox {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5.2rem;
    margin-top: -3.7rem;
    margin-left: -2.6rem;
    .img1 {
      width: 100%;
    }
    .img2 {
      width: 0.74rem;
      margin-top: 0.9rem;
    }
    .btn {
      position: absolute;
      top: 3.4rem;
      left: 50%;
      width: 3.6rem;
      margin-left: -1.8rem;
      height: 1rem;
      line-height: 1rem;
      background: #ffeb01;
      border-radius: 0.5rem;
      font-size: 0.49rem;
      color: #ca1a27;
    }
    .mesg {
      position: absolute;
      top: 4.8rem;
      left: 50%;
      width: 3.6rem;
      margin-left: -1.8rem;
      height: 1rem;
      line-height: 0.45rem;
      font-size: 0.29rem;
      color: #b5b5b5;
    }
  }
}
</style>
